<!-- 这是未登陆前的展示页面 -->
<template>
  <section>
    <div class="back" @click="back"></div>
    <div class="showoff" ref="showoff">
      <img src="/static/images/1.jpg" alt="showoff 1">
      <img src="/static/images/2.jpg" alt="showoff 2">
      <img src="/static/images/3.jpg" alt="showoff 3">
    </div>
    <div class="goon" @click="next"></div>
  </section>
</template>

<script>
export default {
  name: 'showoff',
  data () {
    return {
      active: 0
    }
  },
  methods: {
    next () {
      if (this.active > -2) {
        this.$refs.showoff.style.transform = `translateX(${(--this.active) * 100}vw)`
      } else {
        this.$router.replace({
          name: 'signup'
        })
      }
    },
    back () {
      if (this.active !== 0) {
        this.$refs.showoff.style.transform = `translateX(${(++this.active) * 100}vw)`
      } else {
        this.$router.replace({
          name: 'login'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
section {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  position: relative;
}
.showoff {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  transition: transform 0.4s;
}
img {
  width: 100vw;
  height: 100vh;
}
.goon {
  z-index: 10;
  width: 100vw;
  height: 10vh;
  position: absolute;
  left: 0;
  bottom: 40px;
}
.back {
  z-index: 10;
  width: 10vw;
  height: 5vh;
  position: absolute;
  left: 30px;
  top: 30px;
}
</style>
